<template>
  <div class="catelogue">
    <div class="flex justify-between align-center my-2">
      <div class="text-666">列表目录</div>
      <div class="text-666 core-button gradient-text" @click="create">
        新建&编辑
      </div>
    </div>
    <ul v-if="list.length > 0" class="catelogue-list flex flex-col gr-4">
      <li
        v-for="(item, key) in list"
        :key="key"
        class="flex gc-4 align-center justify-between"
        :class="{ active: currentId === item.id }"
        @contextmenu.prevent.stop="onContextmenu(item)"
      >
        <div v-if="program.defaultId === item.id" class="star">
          <img :src="star" width="20" />
        </div>
        <div class="flex gc-4 align-center justify-left" style="width: 100px">
          <div class="program-title">
            {{ item.title }}
          </div>
          <div v-if="item.category" class="category">
            {{ item.category }}
          </div>
        </div>

        <div class="enter flex-1 flex flex-s" @click="selectItem(item)">
          进入目录
        </div>

        <div class="edit p-4 flex">
          <div class="icon-button" @click="edit(item)">
            <img :src="editPng" width="14" />
          </div>
          <div class="icon-button" @click="del(item)">
            <img :src="deletePng" width="14" />
          </div>
        </div>
      </li>
    </ul>
    <div v-else class="flex flex-s empty flex-col">
      <div class="h-100">没有任何内容</div>
    </div>
    <Create v-model:visiable="visiable" :data="data"></Create>
  </div>
</template>

<script setup lang="ts">
  import deletePng from '@/assets/images/delete.png';
  import editPng from '@/assets/images/edit.png';
  import star from '@/assets/images/star.png';
  import downloadPng from '@/assets/images/download.png';
  /*  */
  import { programData } from '@/store/program/utils';
  import { computed, ref } from 'vue';
  import { ProgramData } from '@/store/program/types';
  import { currentFolder, resetCurrentFolder, selectList } from '@/views/bus';
  import { notify } from '@/views/components/notify/bus';
  import { contextmenuConfig } from '@/views/components/contextmenu/bus';
  import { downloadTextFile } from '@/utils/file';
  import Create from './Create.vue';
  // eslint-disable-next-line import/no-cycle
  import { selectTabByFlag } from '../tabs/bus';
  import { currentId } from './bus';

  const data = ref<ProgramData>();
  const visiable = ref(false);
  const program = programData();
  const selectItem = (item: ProgramData) => {
    selectList.value = item.data;
    selectTabByFlag('tree');
    currentId.value = item.id;
    resetCurrentFolder();
  };

  const del = (item: ProgramData) => {
    notify({
      msg: `确定删除吗`,
      title: '警告',
      onComfirm() {
        program.programList = program.programList.filter((e) => e !== item);
      },
    });
  };
  const create = () => {
    data.value = undefined;
    visiable.value = true;
  };
  const edit = (item: ProgramData) => {
    data.value = item;
    visiable.value = true;
  };

  const onContextmenu = (item: ProgramData) => {
    const event = window.event as MouseEvent;
    event.preventDefault();
    contextmenuConfig.value = {
      show: true,
      list: [
        {
          title: '编辑',
          icon: editPng,
          action() {
            edit(item);
          },
        },
        {
          title: '删除',
          icon: deletePng,
          action() {
            del(item);
          },
        },
        {
          title: '下载',
          icon: downloadPng,
          action() {
            const text = JSON.stringify(item);
            downloadTextFile(text, `${item.title}.json`);
          },
        },
      ],
      left: event.x,
      top: event.y,
    };
  };
  const list = computed(() => {
    return program.programList;
  });
</script>

<style lang="scss" scoped>
  @import './catalogue';
</style>
